<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="600px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="108px" :rules="formRules">
                <el-form-item label="商品名称" prop="name">
                    <el-input v-model="formData.name" clearable placeholder="请输入商品名称" />
                </el-form-item>
                <el-form-item label="分类" prop="cid">
                    <el-select v-model="formData.cid" clearable placeholder="请选择分类">
                        <el-option
                            v-for="item in giftCateList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="封面图片" prop="cover">
                    <el-input
                        v-model="formData.cover"
                        clearable
                        placeholder="请输入图片"
                        :disabled="true"
                        style="display: none"
                    />
                    <material-picker v-model="formData.cover" :limit="1" />
                </el-form-item> -->

                <el-form-item label="颜色" prop="color">
                    <el-input v-model="formData.color" clearable placeholder="请输入颜色" />
                </el-form-item>
                <el-form-item label="型号" prop="type">
                    <el-input v-model="formData.type" clearable placeholder="请输入型号" />
                </el-form-item>

                <el-form-item label="图片" prop="photos">
                    <!-- <el-input v-model="formData.cover" clearable placeholder="请输入图片" :disabled="true" style="display: none;"/> -->
                    <material-picker v-model="formData.photos" :limit="9" />
                </el-form-item>
                <el-form-item label="片数" prop="number">
                    <el-input v-model="formData.number" placeholder="请输入" clearable type="number" :min="1"/>
                </el-form-item>
                <el-form-item label="组数" prop="group_number" label-width="120px">
                    <el-input
                        v-model="formData.group_number"
                        placeholder="请输入"
                        class="config-key-input"
                        type="number"
                    />
                </el-form-item>
                <el-form-item label="盖帽颜色" prop="hat_color">
                    <el-input
                        v-model="formData.hat_color"
                        clearable
                        placeholder="请输入盖帽颜色"
                    />
                </el-form-item>
                <el-form-item label="接口口径" prop="caliber">
                    <el-input v-model="formData.caliber" clearable placeholder="请输入接口口径" />
                </el-form-item>
                <el-form-item label="系列" prop="series">
                    <el-input v-model="formData.series" clearable placeholder="请输入系列" />
                </el-form-item>
                <el-form-item label="尺寸" prop="size">
                    <el-input v-model="formData.size" clearable placeholder="请输入尺寸" />
                </el-form-item>
                <el-form-item label="进水方式" prop="method">
                    <el-input v-model="formData.method" clearable placeholder="请输入进水方式" />
                </el-form-item>

                <el-form-item label="特殊型号" prop="special_type">
                    <el-input
                        v-model="formData.special_type"
                        clearable
                        placeholder="请输入特殊型号"
                    />
                </el-form-item>
                
                
                <el-form-item label="销售单价" prop="sale_price">
                    <el-input
                        v-model="formData.sale_price"
                        placeholder="请输入"
                        class="config-key-input"
                        type="number"
                        :min="0.1"
                    />
                </el-form-item>
                <el-form-item label="成本单价" prop="cost_price">
                    <el-input
                        v-model="formData.cost_price"
                        placeholder="请输入"
                        class="config-key-input"
                        type="number"
                        :min="0.1"
                    />
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input
                        v-model="formData.unit"
                        placeholder="请输入"
                        class="config-key-input"
                    />
                </el-form-item>
                <el-form-item label="商品编码" prop="sku_code">
                    <el-input
                        v-model="formData.sku_code"
                        placeholder="请输入"
                        class="config-key-input"
                    />
                </el-form-item>
                <el-form-item label="简介" prop="desc">
                    <el-input v-model="formData.desc" clearable placeholder="请输入简介" />
                </el-form-item>
                
            </el-form>
        </popup>
    </div>
</template>

<script lang="ts" setup name="roomEdit">
import type { FormInstance } from 'element-plus'
import Popup from '@/components/popup/index.vue'
import { goodsAdd, goodsEdit, goodsDetail } from '@/api/goods'
import { goodsCateLists } from '@/api/classify'
import { timeFormat } from '@/utils/util'
import type { PropType } from 'vue'
import { ref, computed, onMounted, reactive, shallowRef } from 'vue'

// 定义配置项接口

// 定义配置对象接口

defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')

// 弹窗标题
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑商品' : '新增商品'
})
// 表单数据
const formData = reactive<{
    id?: string,
    cid: string,
    name: string,
    // cover: string,
    color: string,
    type: string,
    photos: Array<string>,
    hat_color: string,
    caliber: string,
    series: string,
    size: string,
    method: string,
    special_type: string,
    desc: string,
    sale_price: number,
    cost_price: number,
    unit: string,
    sku_code: string,
    number: number | string,
    group_number: number | string
}>({
    cid: '',
    name: '',
    // cover: '',
    color: '',
    type: '',
    photos: [],
    hat_color: '',
    caliber: '',
    series: '',
    size: '',
    method: '',
    special_type: '',
    desc: '',
    sale_price: 0,
    cost_price: 0,
    unit: '',
    sku_code: '',
    number: 1,
    group_number: 1
})
const validateQuantityMustBeZero = (rule: any, value: any, callback: any) => {
  if (value == '' || value == null || Number(value) == 0) {
    callback(new Error('该值必须大于0'))
  } else {
    callback()
  }
}
// 表单验证
const formRules = reactive<any>({
    name: [
        {
            required: true,
            message: '请输入商品名称',
            trigger: ['blur']
        }
    ],
    cid: [
        {
            required: true,
            message: '请选择分类',
            trigger: ['blur']
        }
    ],
    number: [
        {
            required: true,
            message: '请输入片数',
            trigger: ['blur']
        },
        { validator: validateQuantityMustBeZero, trigger: 'blur' }
    ],
    // cover: [
    //     {
    //         required: true,
    //         message: '请上传图片',
    //         trigger: ['blur']
    //     }
    // ]
})

// 在组件挂载时初始化配置项
onMounted(() => {})

// 获取详情
const setFormData = async (data: Record<any, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
        if (key == 'photos') {
            formData[key] = data[key] != '' ? data[key].split(',') : ''
        }
    }
    editId.value = data.id
}
const editId = ref(0)

const getDetail = async (row: Record<string, any>) => {
    const data = await goodsDetail({
        id: row.id
    })
    editId.value = row.id
    setFormData(data)
}

// 提交按钮
const handleSubmit = async () => {
    await formRef.value?.validate()
    const data = { ...formData, photos: formData.photos.join(',') }
    
    mode.value == 'edit' ? await goodsEdit({ ...data, id: editId.value }) : await goodsAdd(data)
    popupRef.value?.close()
    emit('success')
}

//打开弹窗
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
    getGiftCateList()
}

// 关闭回调
const handleClose = () => {
    emit('close')
}

const giftCateList = ref<any[]>([])
const getGiftCateList = async () => {
    const data = await goodsCateLists({
        page_no: 1,
        page_size: 10000,
        status: 1
    })
    giftCateList.value = data.lists.map((item: any) => ({
        label: item.name,
        value: item.id
    }))
}



defineExpose({
    open,
    setFormData,
    getDetail
})
</script>

<style scoped>
.config-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.config-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.config-key-input {
    width: 200px;
}

.config-value-input {
    flex: 1;
}
</style>
